<template>
  <div>
    <el-scrollbar ref="scrollbarRef" always class="scroll-better">
    <el-row align="middle">
      <el-col :span="1">
        <el-slider v-model="val" :max="max" vertical :show-tooltip="false" :height="sliderHeight" />
      </el-col>
      <el-col :span="23">
        <ol class="parent" ref="scrollBetter">
          <li v-for="item in treeData" :class="[item.id, curItem == item.id ? 'active' : '']">
            <h4 class="ellipsis" :ref="`${item.id}-scroll-better`" >
              <el-tooltip effect="light" :disabled="isShowToolTip">
                <template #content>{{item.name}}</template>
                <a @mouseover="isToolTip" @click="scrollTo(item.id)">{{item.name}}</a>
              </el-tooltip>
            </h4>
            <div v-if="item.children?.length>0">
              <ul class="child">
                <li v-for="itemChild in item.children" :class="[itemChild.id, curItem == itemChild.id ? 'active' : '']"
                  :title="itemChild.name">
                  <h5 class="ellipsis" :ref="`${itemChild.id}-scroll-better`">
                    <el-tooltip effect="light" :disabled="isShowToolTip">
                      <template #content>{{itemChild.name}}</template>
                      <a @mouseover="isToolTip" @click.stop="scrollTo(itemChild.id)">{{itemChild.name}}</a>
                    </el-tooltip>
                  </h5>
                </li>
              </ul>
            </div>
          </li>
        </ol>
      </el-col>
    </el-row>
  </el-scrollbar>
  </div>
</template>
<script setup>
const props = defineProps({
  treeData: Array
})
const emits = defineEmits(['updateScroll'])
const max = ref(100)
let val = ref(100)

let curItem = ref('')
const { proxy } = getCurrentInstance()

const scrollBetter = ref()
const sliderHeight = ref('0px')
watch(() => props.treeData, () => {
  sliderHeight.value = scrollBetter.value.clientHeight+'px'
}, {deep:true,flush: 'post'})

const addActive = (id, children) => {
  curItem.value = id
  if (!children) {
    let item = proxy.$refs[`${id}-scroll-better`]
    if (item) {
      let itemOffsetTop = item[0].offsetTop + item[0].clientHeight / 2
      val.value = 100 - itemOffsetTop / scrollBetter.value.clientHeight * 100
    }
  }
}
const scrollTo = (id) => {
  addActive(id)
  emits('updateScroll', id)
}

const isShowToolTip = ref(true)
const isToolTip = (e) => {
  const selfWidth = e.target.offsetWidth
  const parentWidth = e.target.parentNode.offsetWidth
  if(selfWidth > parentWidth){
    isShowToolTip.value = false
  }else {
    isShowToolTip.value = true
  }
}
defineExpose({
  addActive
})
</script>
<style lang="scss">
$baseColor: var(--el-color-primary);

.scroll-better {
  // position: sticky;
  // top: 100px;
  // position: fixed;
  // top: 50%;
  // transform: translateY(-50%);
  height: calc(100vh - 110px - 100px);

  .el-slider {
    width: fit-content;

    .el-slider__bar {
      background-color: transparent;
    }
  }

  .parent {
    position: relative;

    ul {
      list-style: disc;
      padding-left: 1em;
    }

    li {
      width: 100%;
      color: #333;
      font-weight: bold;
      a{
        font-size: 18px;
        font-weight: bold;
      }
    }

    .child {
      li {
        color: #666;
        a{
          font-size: 16px;
          font-weight: bold;
        }
      }

      .active {
        color: $baseColor;
      }
    }

    .active {
      color: $baseColor;
    }
  }

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>